<template>
  <div>
    <el-form :model="dataForm" :rules="rules" ref="ruleForm" label-width="150px">
      <el-form-item label="选择服装类型" prop="clothingTypeId">
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="(item, index) in typepage" :key="item.id" :title="item.dictName" :name="index">
            <div class="typeList">
              <div class="typeItem" :class="dataForm.clothingTypeId===i.id?'active':''"  v-for="i in item.subjectNestedList" :key="i.id" @click="typeChioce(i.id)">
                <div>{{i.dictName}}</div>
                <img :src="i.orderPicture" class="img">
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>
      <el-form-item label="选择设计师" prop="designerId">
        <el-select class="s_input" v-model="dataForm.designerId" filterable placeholder="请选择" >
          <el-option v-for="item in designerlist" :key="item.userId" :label="item.username" :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="胸围" prop="bust">
        <el-input class="s_input" v-model="dataForm.bust"></el-input>
      </el-form-item>
      <el-form-item label="腰围" prop="waist">
        <el-input class="s_input" v-model="dataForm.waist"></el-input>
      </el-form-item>
      <el-form-item label="臂围" prop="hipline">
        <el-input class="s_input" v-model="dataForm.hipline"></el-input>
      </el-form-item>
      <el-form-item label="身高" prop="height">
        <el-input class="s_input" v-model="dataForm.height"></el-input>
      </el-form-item>
      <el-form-item label="顾客报价" prop="customerAmount">
        <el-input class="s_input" v-model="dataForm.customerAmount"></el-input>
      </el-form-item>
      <el-form-item label="订单描述" prop="orderDescribe">
        <el-input v-model="dataForm.orderDescribe"></el-input>
      </el-form-item>
      <el-form-item label="订单图片">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          accept=".jpeg,.png,.jpg,.gif"
          :on-success="successPictureHandle">
          <img v-if="dataForm.orderPicture" :src="dataForm.orderPicture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交订单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uploadUrl: this.$http.adornUrl('/uploadfile'), // 图片上传地址
      headers: { token: this.$cookie.get('token') }, // 图片所需token
      dataForm: {
        clothingTypeId: '', // 服装类型id
        designerId: '', // 设计师id
        bust: '', // 胸围
        waist: '', // 腰围
        hipline: '', // 臂围
        height: '', // 身高
        customerAmount: '', // 顾客报价
        orderDescribe: '', // 订单描述
        orderPicture: '' // 订单图片
      },
      typepage: [], // 服装类型列表
      designerlist: [], // 设计师列表
      activeNames: [], // 服装类型展开的折叠面板
      rules: { // 表单规则
        clothingTypeId: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        bust: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        waist: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        hipline: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        orderDescribe: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        customerAmount: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ],
        designerId: [
          { required: true, message: '必填项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  activated () {
    this.getDesignerlist()
    this.getTypepage()
  },
  methods: {
    // 选择类型
    typeChioce (id) {
      this.dataForm.clothingTypeId = id
    },
    // 图片上传成功
    successPictureHandle (response, file, fileList) {
      console.log(response, file, fileList)
      this.dataForm.orderPicture = response.pictureInfoVOS[0].imgAddress
    },
    // 提交订单
    submit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/clothingorder/add'),
            method: 'post',
            data: this.$http.adornData({
              ...this.dataForm
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message.success('操作成功！')
              this.$emit('closeSelf', 'customization-customization')
              this.$router.replace({ name: 'user-userInfo' })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 获取服装类型列表
    getTypepage () {
      this.$http({
        url: this.$http.adornUrl('/clothingtype/typepage'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.typepage = res.data
        } else {
          this.typepage = []
        }
      })
    },
    // 获取设计师列表
    getDesignerlist () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/designerlist'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.designerlist = res.data
        } else {
          this.designerlist = []
        }
      })
    }
  }
}
</script>

<style lang="scss">
.img{
  width: 100px;
  height: 100px;
}
.s_input{
  width: 200px;
}
.typeList{
  display: flex;
  flex-wrap: wrap;
  .typeItem{
    border: 1px #8b8787 solid;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .typeItem.active{
    border: 1px #c21515 solid;
  }  
}
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>